<template>
<!--<div ref="rootRef" class="use-element-bounding">
  <p>UseElementBounding</p>
  <p>x: {{ x }}</p>
  <p>y: {{ y }}</p>
  <p>top: {{ top }}</p>
  <p>right: {{ right }}</p>
  <p>bottom: {{ bottom }}</p>
  <p>left: {{ left }}</p>
  <p>width: {{ width }}</p>
  <p>height: {{ height }}</p>
</div>-->
  <UseElementBounding class="use-element-bounding" v-slot="{ width, height }">
    Width: {{ width }} Height: {{ height }}
  </UseElementBounding>
</template>
<script setup lang="ts">
/*import {ref} from "vue";
import {useElementBounding} from "@vueuse/core";*/
import { UseElementBounding } from "@vueuse/components";

/*
defineOptions({
  name: "UseElementBoundingX"
})
*/

/*const rootRef = ref<HTMLElement | null>(null)
const { x, y, top, right, bottom, left, width, height } = useElementBounding(rootRef)*/
</script>
<style scoped lang="css">
  .use-element-bounding {
    position: relative;
    background: pink;
    resize: both;
    padding: 15px;
    overflow: auto;
  }
</style>
